<template>
  <view class="login-main" style="height: 100%; background-color: #f0f1f6;">
	  
    <view
      class="login-main-top d-flex flex-column px-3 j-center"
      :class="isLogin ? 'login-status' : ''"
    >
		
		<!-- 登录模块开始 -->
		<view class="login-mew-mines">
			<view class="login-mew-image">
			  <image
			    v-if="image=='' || image == 'undefined'"
			    src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/11134350wzya.jpg"
			    style="width:120upx;height: 120upx;border-radius: 50%;border: 2upx solid #fff;"
			    alt=""
			  />
			  <image
			    v-else
			    :src="image"
			    style="width:127upx;height: 127upx;border-radius: 50%;"
			    alt=""
			  />
			</view>
			<view class="ml-3 login-mew-text">
			  <view
			    v-if="!isLogin"
			    class="ml-3"
			  >
			    <view class="font-32 uni-bold login-box">
					<text @tap="toRegistPage">注册</text>
					<text>/</text>
					<text @tap="toLoginPage"> 登录</text>
			    </view>
			    <view class="font-24">登录后即可体验更多服务</view>
			  </view>
			  <view
			    v-else
			    class="font-30 uni-bold top-title-wrap"
			  >
			    <text>用户{{username}}</text>
			    <text
			      @tap="toEdit"
			      class="edit"
			    >编辑资料</text>
			  </view>
			  <view class="font-23">{{email}}</view>
			</view>
		</view>
		<!-- 登录模块结束 -->
		
      <view class="login-mew-mine" style="background-color: #fff;">

        <view class="login-mew-tub">
          <view
            class="flex-1 flex-cen"
            @tap="skipConcernListPage"
          >
            <!-- <image
              src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10135842vpo2.jpg"
              class="wdhg"
            ></image> -->
			<image
			  src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/12103858w5da.jpg"
			  class="wdhg"
			></image>
			<text>收藏</text>
          </view>
          
          <view
            class="flex-1 flex-cen"
            @tap="skipCommentListPage"
          >
            <!-- <image
              src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/101401192y9s.jpg"
              class="wdhg"
            ></image> -->
			<image
			  src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/12103923riav.jpg"
			  class="wdhg"
			></image>
			<text>评论</text>
          </view>
          <view
            class="flex-1 flex-cen"
            @tap="skiphistoryPage"
          >
            <!-- <image
              src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10140308dsp4.jpg"
              class="wdhg"
            ></image> -->
			<image
			  src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/12103654y5l0.jpg"
			  class="wdhg"
			></image>
			<text>历史</text>
          </view>
		  <view
		    class="flex-1 flex-cen"
			@tap="skipPurchaseListPage"
		  >
		  <!-- @tap="addEstateInfo" -->
		    <!-- <image
		      src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10140659wxov.jpg"
		      class="wdhg"
		    ></image> -->
			<image
			  src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/12104008wb38.jpg"
			  class="wdhg"
			></image>
			<text>订阅</text>
		  </view>
        </view>
      </view>

    </view>
    <view style="width: 100%; height: 78upx;"></view>
    <view class="login-mew-list">
      <!-- iOS不显示购买记录 -->
      <!-- <view
        v-if="!isIOS"
        class="font-32 p-d"
        @tap="skipPurchaseListPage"
      >
        <image
          class="icon_img"
          src="../../static/tabbar/gm.png"
        ><text>购买记录</text>
          <image
            class="wdhg_img"
            src="../../static/tabbar/jt.png"
          ></image>
      </view> -->
	  <view
	    class="font-32 p-d"
	    @tap="skipTonewsbroke"
	  >
	    <image
	      class="icon_img"
	      src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10141918vft3.jpg"
	    ><text>新闻爆料</text>
	      <image
	        class="wdhg_img"
	        src="../../static/tabbar/jt.png"
	      ></image>
	  </view>
      <view
        class="font-32 p-d"
        @tap="toYjfk"
      >
        <image
          class="icon_img"
          src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10142446ntmv.jpg"
        ><text>意见与反馈</text>
          <image
            class="wdhg_img"
            src="../../static/tabbar/jt.png"
          ></image>
      </view>
      
	  <view
	    class="font-32 p-d"
	    @tap="topinpai"
	  >
	    <image
	      class="icon_img"
	      src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/101426202mce.jpg"
	    ><text>品牌活动</text>
	      <image
	        class="wdhg_img"
	        src="../../static/tabbar/jt.png"
	      ></image>
	  </view>
	  <view
	    class="font-32 p-d"
	    @tap="towdxx"
	  >
	    <image
	      class="icon_img"
	      src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10142644knk1.jpg"
	    ><text>我的信息</text>
	      <image
	        class="wdhg_img"
	        src="../../static/tabbar/jt.png"
	      ></image>
	  </view>
	  <view
	    class="font-32 p-d"
	    @tap="tobqsm"
	  >
	    <image
	      class="icon_img"
	      src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10142716a7sf.jpg"
	    ><text>版权声明</text>
	      <image
	        class="wdhg_img"
	        src="../../static/tabbar/jt.png"
	      ></image>
	  </view>
	  <view
	    class="font-32 p-d"
	    @tap="tolxwm"
	  >
	    <image
	      class="icon_img"
	      src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/121522501i3i.jpg"
	    ><text>联系我们</text>
	      <image
	        class="wdhg_img"
	        src="../../static/tabbar/jt.png"
	      ></image>
	  </view>
      <view
        class="font-32 p-d"
        @tap="skipSettingPage"
      >
        <image
          class="icon_img"
          src="http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10142741yngc.jpg"
        ><text>更多设置</text>
          <image
            class="wdhg_img"
            src="../../static/tabbar/jt.png"
          ></image>
      </view>
    </view>

  </view>
</template>

<script>
import api from '@/common/lib/request.js';
export default {
  data() {
    return {
      scrollH: 0,
      email: '',
      isLogin: false,
      collectionList: [],
      commentList: [],
      purchaseList: [],
      token: '',
      username: '',
      image: ''
    };
  },
  computed: {
    isIOS() {
      return this.$store.getters.isIOS
    }
  },
  onLoad() {
    // uni.getSystemInfo({
    // 	success: res => {
    // 		this.scrollH = res.windowHeight - uni.upx2px(375 + 203);
    // 	}
    // });	
  },
  onShow() {
    this.token = uni.getStorageSync('token');
    if (this.token) {
      this.isLogin = true
      this.refreshScrollH(265)
      this.initMinePage();
    } else {
      this.collectionList = [];
      this.purchaseList = [];
      this.commentList = [];
      this.isLogin = false
      this.image = ''
      this.refreshScrollH(160)
    }
  },
  methods: {
    //刷新滚动部分高度
    refreshScrollH(val) {
      uni.getSystemInfo({
        success: res => {
          this.scrollH = res.screenHeight - val - 51;
        }
      });
    },
    skipToArticlePage(obj) {

    },
    initMinePage() {
      this.initUserInfo();
      this.initCollectList();
      this.initCommentList();
      this.initPurchaseList();
    },
    // 初始化用户信息
    initUserInfo() {
      // let userInfo = uni.getStorageSync('userInfo');
      // if (userInfo) {
      // 	let userInfoJson = JSON.parse(userInfo);
      // 	this.username = userInfoJson.userName;
      // 	console.log(userInfoJson)
      // 	this.image = userInfoJson.userImg
      // } else {
      // 	this.username = '';
      // }
      let token = uni.getStorageSync("token");
      if (token) {
        api.request({
          url: '/user/info',
          data: {
            token: token
          }
        })
          .then(response => {
            this.username = response.userName;
            this.image = response.userImg
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.username = '';
      }

    },
    //用户反馈
    skipToOpinionPage() {
      let token = uni.getStorageSync('token');
      if (token) {
        uni.navigateTo({
          url: '/pages/mine/opinionSubmit/opinionSubmit'
        })
      } else {
        uni.showToast({
          title: "您尚未登录",
          icon: 'none'
        })
      }
    },
    skipTotalDataListPage(type) {
      if (this.token) {
        switch (type) {
          case 1:
            this.skipConcernListPage()
            break;
          case 2:
            this.skipCommentListPage()
            break;
          case 3:
            this.skipPurchaseListPage()
            break;
        }
      } else {
        uni.navigateTo({
          url: '/pages/mine/login/login'
        });
      }
    },
    toEdit() {
      uni.navigateTo({
        url: '/pages/mine/basic/basic'
      })
    },
    //跳转到收藏界面
    skipConcernListPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/collectionList/collectionList?username=' + this.username
      })
    },
    skipPurchaseListPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/purchaseRecords/purchaseRecords?username=' + this.username
      })
    },
    skipCommentListPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/commentRecords/commentRecords?username=' + this.username
      })
    },
    //历史
    skiphistoryPage() {
      uni.navigateTo({
        url: '/pages/mine/listSet/historyList/historyList?username=' + this.username
      })
    },
    //新闻爆料
    skipTonewsbroke() {
      uni.navigateTo({
        url: '/pages/mine/listSet/newsbroke/newsbroke?username=' + this.username
      })
    },
	//意见与反馈
	toYjfk() {
	  uni.navigateTo({
	    url: '/pages/mine/listSet/newsbroke/yjfkbroke?username=' + this.username
	  })
	},
    // 初始化收藏列表
    initCollectList() {
      const _this = this;
      api.request({
        url: '/user/collectionList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          _this.collectionList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              url: item.url
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化评论列表
    initCommentList() {
      const _this = this;
      api.request({
        url: '/user/commentList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          console.log(response);
          _this.commentList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              url: item.url
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化购买列表
    initPurchaseList() {
      const _this = this;
      api.request({
        url: '/user/purchaseList',
        data: {
          username: _this.username
        }
      })
        .then(response => {
          _this.purchaseList = response.map(item => {
            return {
              title: item.title,
              releaseDate: item.releaseDate.split(' ')[0],
              url: item.url
            }
          })
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查看楼盘信息
    addEstateInfo() {
      uni.navigateTo({
        url: '/pages/specialPage/concernList/concernList'
      })
    },
    //更多设置
    skipSettingPage() {
      uni.navigateTo({
        url: '/pages/mine/setting/new_setting'
      });
    },

    toRegistPage() {
      uni.navigateTo({
        url: '/pages/mine/register/register'
      });
    },
    toLoginPage() {
      uni.navigateTo({
        url: '/pages/mine/login/login'
      });
    },
	todingyue(){
		uni.navigateTo({
			url: '/pages/mine/aboutUs/aboutUs?type=3'
		})
	},
	tobqsm(){
		uni.navigateTo({
			url: '/pages/mine/aboutUs/aboutUs?type=4'
		})
	},
	towdxx(){
		uni.navigateTo({
			url: '/pages/mine/aboutUs/aboutUs?type=5'
		})
	},
	tolxwm(){
		uni.navigateTo({
			url: '/pages/mine/aboutUs/aboutUs?type=6'
		})
	},
	topinpai(){
		uni.navigateTo({
			url: '/pages/mine/aboutUs/aboutUs?type=7'
		})
	}
  }
};
</script>

<style scoped>
.top-title-wrap {
  display: flex;
  align-items: center;
}
.login-main {
  height: var(--status-bar-height);
  width: 100%;
}
.edit {
  color: #005bac;
  padding: 1px;
  margin-left: 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid #005bac;
}
.login-mew-mine {
  width: 660upx;
  left: 45upx;
  height: 160upx;
  position: absolute;
  top: 300upx;
  z-index: 1000;
  box-shadow: 0 4upx 12upx 0 rgba(0, 0, 0, 0.05);
  /* border-radius: 12upx; */
}
.login-mew-mines{
	width: 692upx;
	position: absolute;
	top: 45upx;
	z-index: 1000;
	margin-top: 60upx;
}
.login-mew-list {
  .font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #262626;
  background-color:#fff;
  width: 100%;
  box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, 0.02);
  /* border-radius: 12upx; */
  margin-bottom: 30upx;
}
.login-mew-list text{font-size: 16px!important;}
.p-d {
  padding: 12px 0 12px 0;
  margin-left: 25px;
  margin-right: 25px;
  border-bottom: 0.5px solid #f5f5f5;
}

.login-mew-image {
  float: left;
  padding: 40upx 0 40upx 10upx;
}
.login-main-top {
  height: 410upx;
  background-image: linear-gradient(-178deg, #005bad 0%, #3f6db7 100%);
  /* background-image: url('http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/10173132v1un.jpg'); */
  background-size: 100%;
  color: white;
  position: relative;
}
.login-mew-tub {
  font-family: PingFang-SC-Regular;
  font-size: 14px;
  color: #4a4a4a;
  display: flex;
  width: 100%;
  text-align: center;
  margin-top: 30upx;
  /* margin-top: 46upx;
		font-family: PingFang-SC-Medium; */
}
.login-mew-tub text{
	margin-top: 3upx;
}
.wdhg_img {
  width: 16upx;
  height: 28upx;
  float: right;
  margin-right: 15px;
  margin-top: 14upx;
}
.login-mew-image{
	width: 15%;
	display: block;
}
.login-mew-text {
  width:60%;
  float: left;
  color: #fff;
  margin-top: 50upx;
  font-family: PingFang-SC-Medium;
}
.login-status {
  height: 428upx !important;
}
.icon_img {
  width: 31upx;
  height: 36upx;
  float: left;
  margin-right: 20upx;
  margin-top: 10upx;
}
.sign-bg {
  width: 147upx;
  height: 62upx;
  border-radius: 31upx 0 0 31upx;
  background-color: #000000;
  opacity: 0.37;
  line-height: 62upx;
  text-align: center;
  margin-right: -30upx;
  color: #ffffff;
}

.list-item {
  height: 72upx;
  font-size: 21upx;
  color: #717171;
  font-weight: bold;
}

.list-item-date {
  width: 160upx;
  font-size: 17upx;
  color: #a6a6a6;
  text-align: right;
}
.flex-cen {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.look-text {
  font-weight: 800;
  font-size: 24upx;
  color: #005bac;
}

.setting {
  position: absolute;
  right: 30upx;
  top: 20upx;
  color: white;
  font-size: 60upx;
}

.records-item {
  width: 127upx;
  height: 127upx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-panel {
  position: absolute;
  justify-content: space-around;
  z-index: 99;
  left: 43upx;
  bottom: -103upx;
  width: 664upx;
  height: 155upx;
  background: rgba(255, 255, 255, 1);
  color: #003366;
  border: 1upx solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 5upx 13upx 0px rgba(6, 27, 47, 0.09);
  border-radius: 5upx;
}
.wdhg {
  width: 48upx;
  height: 48upx;
}
.add-btn {
  width: 103upx;
  height: 45upx;
  border: 2upx solid rgba(0, 51, 102, 1);
  border-radius: 22upx;
}

.block-area {
  height: 103upx;
}
.login-box{
  font-size:15px;
  border-radius: 22upx;
  color:#2f6fb6;
  background-color:#fff;
  width: 50%;
  padding: 0 35upx;
  text-align: center;
  margin-bottom: 10upx;
}
</style>
